<template>
    <ex-dialog
      width="700px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      @closeDialog="handleClose"
    >	
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <el-form-item label=" 门店id:" prop="poiId">
            <el-input type="text" v-model="ruleForm.poiId" autocomplete="off" placeholder="请输入门店id"></el-input>
        </el-form-item>
        <el-form-item label="门店名称:" prop="poiName">
            <el-input type="text" v-model="ruleForm.poiName" autocomplete="off" placeholder="请输入门店名称" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="门店地址:" prop="poiAddress">
            <el-input type="text" v-model="ruleForm.poiAddress" autocomplete="off" placeholder="请输入门店地址" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="门店定位:" prop="lonLatStr">
          <div class="listBox">
            <el-input type="text" v-model="ruleForm.lonLatStr" autocomplete="off" placeholder="请输入门店定位"></el-input>
            <el-button @click="guUrl()" type="primary">获取定位</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
          <el-button @click="handleClose('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </ex-dialog>
  </template>
  <script>
  // components
  import Loading from '@/components/Loading/index'
  // api
  import {
    editPoi,
  } from "@/api/setting/visitorMerchant"
  
  export default {
    components: {
      Loading
    },
    props: {
      visible: Boolean,
      id: String,
      dyNumber: String,
    },
    data() {
      
      return {
        loading: false,
        typeList: [
          {id: 1,value: '支持竞猜'},
          {id: 2,value: '冠军竞猜'},
        ],
        title: '门店匹配',
        imgLoading: false,
          ruleForm: {
          id: '',//id
          poiAddress: '',//门店地址
          poiId: '',//门店id
          lonLatStr: '',//新抖音号
          poiName: '',//门店名称
        },
          rules: {
            poiId: [
              { required: true,message: '请输入门店id',trigger: 'blur' }
            ],
            poiName: [
              { required: true,message: '请输入门店名称',trigger: 'blur' }
            ],
            poiAddress: [
              { required: true,message: '请输入门店地址',trigger: 'blur' }
            ],
            lonLatStr: [
              { required: true,message: '请输入门店定位',trigger: 'blur' }
            ],
           
          }
      }
    },
    computed: {
     
    },
    created() {
      this.ruleForm.id = this.id
    },
    methods: {
      //获取详情
      getDatail(){
        var id = this.id
        userInfo(id).then(res => {
          this.ruleForm = res.result
        })
      },
      //新增主播
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            var data = {
            ...this.ruleForm
            }
            editPoi(data).then(res => {
              setTimeout(() => {
                this.handleClose()
                this.$message.success('操作成功')
                this.$emit('success')
                this.loading = false
              }, 1000);
            }).catch(()=> {
              this.loading = false
            }).finally(() => {

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      
      //取消
      handleClose(formName) {
        this.$emit('update:visible', false)
              // this.$refs[formName].resetFields();
      },
      //确认
      handleConfirm(){
          this.$emit('success', '你好')
      },
      handleSuccess(msg) {
        if (msg === '已拒绝') {
          var type = 'error'
        } else {
          var type = 'success'
        }
        this.$message({
          message: msg,
          type: type,
          duration: 1500,
          onClose: () => {
            this.handleClose()
            this.$emit('success')
          }
        })
      },
      guUrl(){
        window.open('https://lbs.qq.com/tool/getpoint/get-point.html', '_blank')
      },
    }
  }
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
          padding: 0 !important;
    }
      ::v-deep .ex--dialog--main {
      padding: 10px 20px !important; 
    }
  }
  ::v-deep .avatar-uploader2 .el-upload {
    width: 100% !important;
  }

  .avatar-uploader2 {
    width: 130px;
    height: 130px;
    text-align: center;
    line-height: 130px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
  }
  
  .banner_img {
    width: 130px;
    height: 130px;
  }
  .el-input{
    width: 300px;
  }
  
  </style>